<template>
  <page-wrap back title="我的订阅" hideTab>
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'">
      <scroll-view class="latestList" :scroll-y="true" :scroll-x="false" :scroll-with-animation="true"
        v-if="latestSubList.length">
        <!-- <p class="listitle">最新</p> -->
        <template v-for="contentItem,contentIndex in latestSubList">
          <view class="latestItem" v-if="contentItem.contentTitle" :key="contentItem.contentId">
            <p class="itemTitle">系统推送更新提醒</p>
            <p class="itemTime">{{contentItem.timeFromNow}}</p>
            <view class="itemContent" @tap="handleItemClick(contentItem,contentIndex)">
              <img class="contentImg" :src="contentItem.contentPic" alt="">
              <p class="contentItemTitle">{{contentItem.contentTitle}}</p>
            </view>
          </view>
        </template>
      </scroll-view>
      <Empty text="暂无订阅内容" :fontWeight="400" v-else></Empty>
    </view>
  </page-wrap>
</template>

<script>
import Empty from "@/components/Empty.vue";
import { getMyMessageList } from "@/api/modules/vip";
export default {
  data() {
    return {
      personId: "",
      navHeight: 0,
      latestSubList: [],
      emptyImg: this.$imgBaseSelf + "common/empty.png",
    };
  },
  components: {
    Empty,
  },
  onLoad(options) {},
  created() {
    this.navHeight = getApp().globalData.navHeight;
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    this.reqGetLatestSubList();
  },
  methods: {
    handleItemClick(contentItem, contentIndex) {
      console.log("contentItem", contentItem);

      switch (+contentItem.contentType) {
        case 10:
          this.handleReportCaseJump(contentItem);
          break;
        case 20:
          this.handleReportCaseJump(contentItem);
          break;
        case 30:
          this.handleArticleJump(contentItem);
          break;

        default:
          break;
      }
    },
    handleReportCaseJump(contentItem) {
      if (+contentItem.contentType == 10) {
        //报告
        uni.navigateTo({
          url:
            "/pagesSub/companyCenter/report/detail?id=" +
            contentItem.encryptContentId,
        });
      } else if (+contentItem.contentType == 20) {
        //案例
        uni.navigateTo({
          url:
            "/pagesSub/companyCenter/case/detail?id=" +
            contentItem.encryptContentId,
        });
      }
    },
    handleArticleJump(contentItem) {
      //职讯
      uni.navigateTo({
        url:
          "/pagesSub/career/careerInfo/articleDetail?id=" +
          contentItem.contentId,
      });
    },
    reqGetLatestSubList() {
      const params = {
        personId: this.personId,
      };
      getMyMessageList(params).then((res) => {
        if (res.code == 200) {
          this.latestSubList = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.latestList {
  padding: 24rpx;
  max-width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
  .listitle {
    padding: 6rpx 0rpx 24rpx 0rpx;
    font-size: 26rpx;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #555555;
    line-height: 26rpx;
  }
  .latestItem {
    width: calc(100vw - 48rpx);
    background: #ffffff;
    border-radius: 8rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    .itemTitle {
      padding-top: 8rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      line-height: 32rpx;
      border-bottom: 1px solid #f5f5f5;
      padding-bottom: 22rpx;
      padding-left: 4rpx;
    }
    .itemTime {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 24rpx;
      padding: 12rpx 0 20rpx 0;
    }
    .itemContent {
      display: flex;
      align-items: center;
      background: #f8f8f8;
      border-radius: 4rpx;
      margin-bottom: 16rpx;
      padding: 16rpx;

      &:last-of-type {
        margin-bottom: 0;
      }
      .contentImg {
        width: 104rpx;
        height: 104rpx;
        margin-right: 16rpx;
      }
    }
  }
}
::v-deep .empty {
  margin: 0 auto;
  text {
    color: #999999 !important;
    font-size: 28rpx !important;
  }
}
</style>

